<template>
  <div class="help">
    <div class="title">常见问题</div>
    <div class="help-contant" ref="warpper">
      <div>
        <div
          class="item-box"
          v-for="(item,index) in questList"
          :key="index"
          v-if="questList.length>0"
        >
          <div class="q-contant" @click="changeIndex(index)">
            <div class="button">Q</div>
            <div class="text">
              <div>{{item.title}}？</div>
              <i class="iconfont icon-xiangxia1"></i>
            </div>
          </div>
          <div class="a-contant" v-if="listIndex == index">
            <div class="button">A</div>
            <div class="text">
              <div>{{item.content}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="notdata" v-if="questList.length==0">
      <img :src="nothing">
      <div class="text">暂无信息</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions } from "vuex";
import BScroll from "better-scroll";

export default {
  name: "collections",
  data() {
    return {
      questList: [],
      listIndex: -1,
      nothing: require("../../assets/nothing.png")
    };
  },
  created() {
    this.change(false);
    // 获取常见故障
    this.getHelp();
  },

  methods: {
    ...mapActions("Home", ["change"]),
    changeIndex(index) {
      console.log(this.listIndex);
      this.listIndex = index;
      this.$forceUpdate();
    },
    getHelp() {
      this.$http.get("/question/List", {}).then(res => {
        this.questList = res.data.data;
        this.scrollInit();
      });
    },
    scrollInit() {
      new BScroll(this.$refs.warpper, {
        click: true
      });
    }
  },
  components: {}
};
</script>
